<template>
  <div id="main">
    <el-row>
      <el-col>
        <div id="content">
          <h1 class="title">当前操作：转账</h1>
          <el-form ref="form" :rules="rules" :model="form" class="form">
            <el-form-item label="转入卡号" label-width="100px" prop="cardno">
              <el-input v-model="form.cardno"></el-input>
            </el-form-item>
            <el-form-item label="转账金额" label-width="100px" prop="balance">
              <el-input v-model="form.balance"></el-input>
            </el-form-item>
            <el-form-item class="button">
              <el-button type="primary" @click="onSubmit('form')">转账</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {post} from "../../common/request";

export default {
  name: "TransferAccounts",
  data() {
    return {
      form: {
        cardno: "",
        balance: ""
      },
      rules: {
        cardno: [
          {required: true, message: '请输入卡号', trigger: 'blur'},
          {
            pattern: /^\d{16}$/,
            message: "请正确填写16位卡号",
            trigger: "blur"
          }
        ],
        balance: [
          {required: true, message: '请输入金额', trigger: 'blur'},
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "只能输入数字，且最多有两位小数",
            trigger: "blur"
          }
        ]
      }
    }
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          post("/transactionRecord/TransferAccounts", this.form).then(x => {
            if (x.code === 1) {
              //this.$message.success(x.msg);
              this.$router.push("/OptionSuccess")
            } else {
              this.$message.error(x.msg);
            }
          });
        } else {
          this.$message.error("信息填写有误，请重新填写");
          return false;
        }
      });

    }
  }
}
</script>

<style scoped>
#main {
  background-color: rgb(240, 240, 240);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form {
  margin-top: 30px;
}

.button {
  text-align: center;
}
</style>
